<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
      .el-row {
        margin-bottom: 20px;
        &:last-child {
          margin-bottom: 0;
        }
      }
      .el-col {
        border-radius: 4px;
      }
      .bg-purple-dark {
        background: #99a9bf;
      }
      .bg-purple {
        background: #d3dce6;
      }
      .bg-purple-light {
        background: #e5e9f2;
      }
      .grid-content {
        border-radius: 4px;
        min-height: 36px;
      }
      .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
      }
      .box-card {
        margin:auto;
        width: 350px;
        margin-top: 120px;
      }
      .button-style input{
        height: 40px;
				width: 310px;
				background: rgb(73, 159, 235);
				color: white;
				border: 1px solid rgb(34, 121, 208);
				border-radius: 5px;
				font-weight: bolder;
				letter-spacing: 10px;
      }
      h1{
        text-align: center;
        letter-spacing: 10px;
      }
    </style>
</head>
<body>
<div id="app">
    <el-card shadow="always" class="box-card">
        <!--    登录表单-->
        <el-form :model="login" status-icon :rules="rules" ref="login" class="demo-login">
            <h1>登录</h1>

            <el-form-item prop="userId" >
                <el-input  v-model.number="login.userId" autocomplete="off" placeholder="学号/职工号"></el-input>
            </el-form-item>

            <el-form-item prop="userPwd">
                <el-input type="password" v-model="login.userPwd" autocomplete="off"  placeholder="密码"></el-input>
            </el-form-item>

            <el-form-item prop="status">
                </el-input type="hidden" v-model="login.status"></el-input>
            </el-form-item>

            <el-form-item>
                <div class="button-style">
                    <input type="button" @click="submitForm('login')" value="登录"></el-button>
                </div>
            </el-form-item>
        </el-form>
    </el-card>
</div>

<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el:"#app",
         data() {
          var validateId = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入学号/职工号'));
            } else {
              if((""+value).length!=5){
                callback(new Error('学号/职工号必须是五位'));
              }else {
                axios({
                    method:'get',
                    url:"http://localhost:8080/accounts/check/idStatus?id="+value,
                }).then(result=>{
                        if(result.data.code==1){
                           callback();
                           if(result.data.data==1){
                              this.login.status=1;
                           }else if(result.data.data==2){
                              this.login.status=2;
                           }
                        }else if(result.data.code==0){
                            callback(result.data.msg);
                          }
                      })
               }
              callback();
            }
          };
// <!--      验证密码-->
          var validatePass = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入密码'));
            } else {
              callback();
            }
          };

      return {
        login: {
          userId: '',
          userPwd: '',
          status:''
        },
// <!--        登录验证-->
        rules: {
          userId: [
                {required:true, validator: validateId, trigger: 'blur' }
              ],
          userPwd: [
            {required:true, message: '密码不能为空', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
        gotoRegister(){
            location.href="Register.html";
        },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
// <!--        如果验证成功-->
          if (valid) {
// <!--            向后端发送异步请求-->
            axios({
                    method:'post',
                    url:"http://localhost:8080/accounts/login",
                    data:this.login
                }).then(result=>{
<!--                请求成功跳转至主页-->
              if(result.data.code==1){
                console.log(result.data.data);
<!--                将jwt令牌存至本地-->
                localStorage.setItem('token',result.data.data);
                if(this.login.status==1){
                  location.href="StudentView.html";
                }else if(this.login.status==2){
                  location.href="TeacherView.html";
                }
              }else if(result.data.code==0){
                this.$message.error(result.data.msg);
              }
            })
          }
      })
    }
  }
})
</script>
</body>
</html>